<template>
	<view class="login-type">
		<view class="welcome">
			<image class="logo" src="../../static/logo.jpg"></image>
		</view>
		<view>
			<view class="select-type">
				<button class="confirm-btn" type="primary" v-if="isAuthLoginShow" formType="submit" @tap="toAuthLogin">
					<text class="type-name">绑定微信授权信息</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Config
	} from '@/config.js';
	import {
		Public
	} from '@/model/public.js';
	var publicModel = new Public();
	import {
		Common
	} from '@/utils/common.js';
	var common = new Common();
	
	/**
	 * @des 登录类型
	 *
	 */
	export default {
		components: {},
		data() {
			return {
				isRfProtocolPopupShow: false, // 控制协议popup显示
				isLoginDisabled: false, // 是否允许点击登录按钮
				isAuthLoginShow: false,
				checkItem: {
					agree: "yes",
					check: true
				},
				code: '', //用户的code
				userInfo: '',
				loading:false,
				showBind:false,
				uuid:''
			}
		},
		onLoad(options) {
			console.log(options);
			this.uuid=options.uuid ? options.uuid : '';
			/*  #ifdef H5  */
			if (common.isWechat()) {
				this.isAuthLoginShow = true;
			}
			/*  #endif  */
			/*  #ifdef MP-WEIXIN */
			this.isAuthLoginShow = true;
			/*  #endif  */
			/*  #ifndef MP-WEIXIN */
			this.isAuthLoginShow = true;
			/*  #endif  */
			this.code = options.code;
			// 如果不是第一次进来 就不需要强制阅读协议
			if (this.getStorageSync('notFirstTimeLogin')) this.isLoginDisabled = false;
			const _this = this;
		},
		methods: {
			
			//通过多选按钮的值改变isLoginDisabled的值
			check(e) {
				var val = e.detail.value;
				if (val.length >= 1) {
					this.checkItem.agree = "yes";
					this.checkItem.check = true;
					this.isLoginDisabled = false;
				} else {
					this.isLoginDisabled = true;
					this.checkItem.check = false;
					this.checkItem.agree = "no";
				}
			},
			// 授权登录
			toAuthLogin(e) {
				const _this = this;
				/*  #ifdef MP-WEIXIN || MP-TOUTIAO  */

				//正在授权登录
				var getauthloging = this.getStorageSync('authloging');
				if (getauthloging) {
					return false;
				}
				this.setStorageSync('authloging', true);
				this.loading=true;
				var wechatInfo = {};
				var mes = {
					iv: '',
					rawData: '',
					encryptedData: '',
					signature: ''
				};
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						wechatInfo = res.userInfo;
						mes.iv=res.iv;
						mes.rawData=res.rawData;
						mes.encryptedData=res.encryptedData;
						mes.signature=res.signature;
						_this.setStorageSync('authloging', false);
						this.toLogin(wechatInfo,mes);
					},
					fail: (res) => {
						_this.setStorageSync('authloging', false);
						console.log(res)
					}
				});
				/*  #endif  */
				/*  #ifdef H5  */
				if (common.isWechat()) {
					var appid = Config.appid;
					const href = Config.domain + "/pages/public/logintype";
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?
						appid=${appid}&
						redirect_uri=${href}&
						response_type=code&
						scope=snsapi_userinfo&
						state=STATE#wechat_redirect`;

				} else {
					this.$mHelper.toast('当前平台不支持授权登录')
				}
				/*  #endif  */
				/*  #ifdef MP-QQ */
				this.$mHelper.toast('当前平台不支持授权登录')
				/*  #endif  */
			},
			toLogin: function(wechatInfo,mes) {
				var _this = this;
				var that = this;
				uni.showLoading({
					title: '绑定中...'
				});
				wx.login({
					provider: 'weixin',
					success: function(loginRes) {
						var param = {
							...wechatInfo,
							...mes,
							code: loginRes.code,
							uuid:that.uuid
						};
						that.setStorageSync('authUserInfo', wechatInfo);
						var pid = _this.getStorageSync("pid");
						if (pid) {
							param.pid = pid;
						};
						var appid = _this.getStorageSync("xcx_appId");
						if(appid){
							param.appid=appid;
						}else{
							//微信小程序的appID
							// #ifdef MP-WEIXIN
							var xcxInfo = uni.getAccountInfoSync();
							var xcx_appId = xcxInfo && xcxInfo.miniProgram ? xcxInfo.miniProgram.appId : '';
							_this.setStorageSync('xcx_appId', xcx_appId);
							param.appid=xcx_appId
							// #endif
						};
						publicModel.bindingWechat(param, (r) => {
							that.loading=false;
							uni.hideLoading();
							var openid = r.openid;
							if (openid) {
								that.setStorageSync('openid', openid);
							};
							if (r.unionid) {
								that.setStorageSync('unionid', r.unionid);
							};
							if(r.code!=200){
								uni.showToast({
									title:r.message ? r.message : '绑定失败！',
									icon:'none'
								});
							}else{
								setTimeout(function(){
									_this.goto("/pages/index/index");
								},2000);
								uni.showToast({
									title: '绑定成功！'
								});
							}
						})

					}
				});
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg !== 'getPhoneNumber:ok'){
					uni.showToast({
						icon:'none',
						title:'您拒绝了授权手机号'
					});
					return;
				}
				var param = {
					code: e.detail.code
				};
				var _this=this;
				var that=this;
				publicModel.getWechatPhone(param, (r) => {
					if(r.code == 200){
						uni.showToast({
							icon:'success',
							title:'登录成功!'
						});
						const backToPage = that.getStorageSync('backToPage');
						if (backToPage) {
							if (_this.$mHelper.isTabBar(backToPage)) {
								that.$mRouter.reLaunch(JSON.parse(backToPage));
							} else {
								that.$mRouter.redirectTo(JSON.parse(backToPage));
							}
							_this.removeStorageSync('backToPage');
							_this.removeStorageSync('authUserInfo');
							return;
						} else {
							_this.goto("/pages/index/index");
						}
					} else {
						uni.showToast({
							title: r.message,
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style lang='scss'>
	page {
		background: #fff !important;
		height: calc(100% - 88upx);
	}

	.login-type {
		padding-top: 120upx;

		.confirm-btn {
			font-size: $uni-font-size-lg;
		}
		.login-by-phone{
			background-color: #fff;
			color: #00B700;
			border: 2rpx solid  #00B700;
		}

		.icon-weixin {
			font-size: 26rpx;
		}

		.icon-shouji {
			font-size: 26rpx;
		}

		.plain {
			background: none;
		}

		.footer {
			width: 100%;
			text-align: center;
			font-size: $uni-font-size-sm;
			display: flex;
			align-items: center;
			justify-content: center;

			.protocol {
				margin: 0 10upx;
			}
		}
	}

	.logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		margin-bottom: 15rpx;
		margin-top: 80rpx;
	}

	.welcome {
		position: relative;
		top: -90upx;
		color: #555;
		text-align: center;
	}

	.auth {
		background-color: #00B700 !important;
	}

	.select-type {
		width: 80%;
		margin-bottom: 50rpx;
		margin: auto;
	}

	.login-item {
		text-align: center;
		font-size: 28rpx;
		display: flex;
		background-color: #00B700;
		margin-bottom: 50rpx;
		padding: 30rpx;
		color: #fff; 
		border-radius: 60rpx;
	}

	.type-name {
		
	}

	.login-box {
		margin-top: 200rpx;
		display: flex;
		justify-content: center;
	}

	.login-btn {
		text-align: center;
		background: #00B700;
		color: #fff;
		padding: 30rpx 0;
		width: 70%;
		border-radius: 60rpx;
	}
	button::after{
		border: none;
	}
	button{
		background-color: #00B700;
		color: #fff;
		padding: 30rpx;
		width: 100%;
		border-radius: 60rpx;
		margin-bottom: 40rpx;
	}
	.bind-box{
		position: fixed;
		top: 20%;
		z-index: 999;
		background-color: #fff;
		padding: 60rpx;
		width: 80%;
		margin-left: 10%;
		text-align: center;
		border-radius: 20rpx;
	}
	.bind-title{
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 100rpx;
		color: #333;
	}
	.login-other-way{
		padding: 30rpx;
		border-radius: 60rpx;
	}
</style>
